<template>
	<view class="container">
		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top" style="margin-bottom:60rpx">
			<view class="gui-title-line"></view>
			<text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">注册供应商</text>
			<view class="gui-title-line"></view>
		</view>
		<form>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>Logo</text>
				<gui-upload-images @uploaded="changeLogo" maxFileNumber="1" ref="uploadimgcom"></gui-upload-images>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>供应商名称</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.store_name" name="store_name"
						placeholder="请输入名称" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>姓名</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.realname" name="realname"
						placeholder="请输入名称" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>手机号</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.mobile" name="mobile"
						placeholder="请输入手机号" />
				</view>
			</view>
			<view class="gui-margin-top gui-border-b">
				<text class="gui-color-black gui-icons"><text class="gui-color-red">*</text>所在地区</text>
			</view>
			<view class="gui-border-b" @tap="openPicker">
				<input type="text" class="gui-form-input" name="area" :value="area" disabled placeholder="请选择所在地区">
			</view>
			<view class="gui-margin-top gui-border-b">
				<text class="gui-color-black"><text class="gui-color-red">*</text>详细地址</text>
			</view>
			<view class="gui-form-item gui-border-b" style="padding:20rpx 0">
				<textarea v-model="formData.address" name="address" value="" placeholder="说点什么..."
					class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;" />
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>身份证正面</text>
				<view class="gui-form-body" @tap="selectImg1" style="padding:10rpx 0">
					<gui-image :src="idCard1" :width="380"></gui-image>
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label"><text class="gui-color-red">*</text>身份证反面</text>
				<view class="gui-form-body" @tap="selectImg2" style="padding:10rpx 0">
					<gui-image :src="idCard2" :width="380"></gui-image>
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">营业执照</text>
				<gui-upload-images  ref="uploadimgcom" @uploaded="uploaded"></gui-upload-images>
			</view>
			<view style="margin-top:60rpx" @click="onSubmit">
				<view class="gui-text-center gui-bg-blue" hover-class="gui-tap">
					<text
						class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">保存</text>
				</view>
			</view>
		</form>
		<gui-area-picker ref="graceAddressPicker"
		@confirm="areaConfirm"></gui-area-picker>
	</view>
</template>

<script>
	let  graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				formData: {
					logo:'',
					store_name:'',
					realname:'',
					mobile:'',
					province_name:'',
					city_name:'',
					district_name:'',
					address:'',
					aptitude:[],
					identity:['',''],
				},
				area:"",
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				// 文本框输入内容记录
				textareaVal: ' ',
				// 上传按钮名称
				subtxt: "+ 保存",
				idCard1 : 'https://oss.mapaikeji.cn/image/c65ff997bdf62a4365e0a07474c91ccc.png',
				idCard2 : 'https://oss.mapaikeji.cn/image/099d42b103d3426d1c6c523dc7f40c1e.png'
			}
		},
		onShareAppMessage(res) {
			return this.$utils.onShareAppMessage();
		},
		onLoad() {
			
		},
		methods: {
			
			toCategoryAdd() {
				uni.navigateTo({
					url: `/pages/category/manage`
				})
			},
			changeLogo(imgList){
				this.formData.logo = imgList[0].result.data.img_url
			},
			onVerify(){
				let phoneVerify = new RegExp('^[1][3,4,5,6,7,8,9][0-9]{9}$')
				if(this.formData.logo === ''){
					uni.showToast({
						title: '请上传logo',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				if(this.formData.store_name === ''){
					uni.showToast({
						title: '请填写供应商名称',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				if(this.formData.realname === ''){
					uni.showToast({
						title: '请填写姓名',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				if(this.formData.mobile === ''){
					uni.showToast({
						title: '请填写手机号',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(!phoneVerify.test(this.formData.mobile)){
					uni.showToast({
						title: '手机号格式错误',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(this.formData.province_name === ''){
					uni.showToast({
						title: '请选择所在地区',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				if(this.formData.address === ''){
					uni.showToast({
						title: '请填写详细地址',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
					
				if(this.formData.identity[0] === ''){
					uni.showToast({
						title: '请上传身份证正面',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(this.formData.identity[1] === ''){
					uni.showToast({
						title: '请上传身份证反面',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				return true;
			},
			async onSubmit() {
				if(!this.onVerify()){
					return false;
				}
				let apply = JSON.stringify(this.formData);
				console.log(apply)
				const res = await this.$http.post(`route=plugin.supplier.supplier.controllers.apply.supplier-apply.apply`,{
					apply:apply
				});
				uni.showToast({title:"保存成功！", icon:"success"});
				this.$emit('success')
				
			},
			//营业执照上传完成
			uploaded(imgList){
				let list = [];
				imgList.forEach(item=>{
				    list.push(item.result.data.img_url)
				})
				this.formData.aptitude = list;
			},
			selectImg1 : function() {
				uni.chooseImage({
					count:1,
					success:(res) => {
						let self = this;
						this.idCard1 = res.tempFilePaths[0];
						this.$utils.uploadFile({
							url:this.idCard1,
							callback:function(url){
								self.idCard1 = url;
								self.formData.identity[0] = url;
								
							}
						})
					}
				})
			},
			selectImg2 : function() {
				uni.chooseImage({
					count:1,
					success:(res)=>{
						let self = this;
						this.idCard2 = res.tempFilePaths[0];
						this.$utils.uploadFile({
							url:this.idCard2,
							callback(url){
								self.idCard2 = url;
								self.formData.identity[1] = url;
							}
						})
					}
				})
			},
			uploadCards : function(){
				if(
				this.idCard1 == 'https://oss.mapaikeji.cn/image/84ae6543d31fa3c8e979b499590d258e.png' || 
				this.idCard2 == 'https://oss.mapaikeji.cn/image/8eac23897371a3372026141246642c60.png'
				){
					uni.showToast({title:"请选择身份证照片", icon:"none"});
					return;
				}
				// 临时文件地址保存在 this.idCard1 和 this.idCard2 
				// 请调用  uni.uploadFile api 完成上传工作
			},
			openPicker : function () {
				this.$refs.graceAddressPicker.open();
			},
			areaConfirm : function (e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.area = e.names[0]+' '+e.names[1]+' '+e.names[2];
				this.formData.province_name = e.names[0];
				this.formData.city_name = e.names[1];
				this.formData.district_name = e.names[2]
				
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.small-text {
		font-size: 22rpx;
	}

	.title1-margin {
		margin: 0 20rpx;
	}

	.gui-idcard-main {
		margin: 25rpx;
	}

	.gui-idcard-desc {
		background-color: #FFFFFF;
		color: #666666;
		line-height: 56rpx;
		font-size: 26rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.gui-idcard-text {
		line-height: 1.8em;
		margin-top: 30rpx;
		color: #666666;
	}

	.gui-idcard-items {
		background-color: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}

	.gui-idcard-items-image {
		width: 380rpx;
	}
	.gui-form-label{
		width:150rpx !important;
	}
</style>